<template>
  <div>
    <div class="pvTop1">
      <router-link :to="{path:'/main/sitedetail'}">
        <div class="pvTop1_1">
          <van-icon name="arrow-left" />
        </div>
      </router-link>
      <div class="loadTop1_2"><img src="../../assets/chargericon.png" alt="charger"></div>
      <div class="pvTop1_3">EV Charger</div>
    </div>
    <div class="pvBox" v-for="(charger,i) in resData" :key="i">
      <div class="pvBox2">
        <div class="pvBox1_2">{{charger.pileSn}}</div>
        <div class="icon">
          <van-icon name="setting-o" @click="setCharger()" />
        </div>
        <div class="lineBox">
          <div class="line"></div>
        </div>
        <div @click="goDetail(charger.pileSn)">
          <div class="pvBox1_3">
            <div>Connect Status</div>
            <div class="idle" v-if="charger.deviceState==0">空闲</div>
            <div class="connect" v-if="charger.deviceState==1">连接</div>
            <div class="charging" v-if="charger.deviceState==2">充电</div>
            <div class="Done" v-if="charger.deviceState==3">充满</div>
            <div class="Fault" v-if="charger.deviceState==4">故障</div>
            <div class="idle" v-if="charger.deviceState==5">远程升级</div>
            <div class="idle" v-if="charger.deviceState==100">离线</div>
          </div>
          <div class="pvBox1_3">
            <div>Charge Energy</div>
            <div>{{charger.chargeEnergy | units('kWh',2)}}</div>
          </div>
        </div>
      </div>
    </div>
    <van-empty :description="$t('NoData')" v-if="resData.length==0" />
  </div>
</template>

<script>
export default {
  data(){
    return {
      resData:[],
      fifteenRefresh:null
    }
  },
  methods: {
    async getChargeList(){
      this.comm.loadingShow();
      let res = await this.API.getChargerPage(localStorage.getItem("domain"),{
        'tokenId':localStorage.getItem("tokenId"),
        'userId':localStorage.getItem('userId')
      })
      this.resData = res;
    },
    setCharger(){
      sessionStorage.setItem('setFrom','/chargerlist');
      this.$router.push({path:'/chargersetting'});
    },
    goDetail(pileSn){
      localStorage.setItem('pileSn',pileSn);
      this.$router.push({path:'/chargerdetail'});
    }
  },
  mounted() {
    this.getChargeList();
    this.fifteenRefresh=setInterval(()=>{
      this.getChargeList();
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less">
.pvTop1{
  background: url("../../assets/chargertop.png") no-repeat center  / 100% 100%;
  width: 100%;
  height: 150px;
  box-sizing: border-box;
}
.pvTop1_1{
  font-size: 30px;
  color: #FFFFFF;
  float: left;
  padding: 40px 16px 0 20px;
}
.loadTop1_2{
  float: left;
  padding-top: 34px;
  img{
    width: 40px;
  }
}
.pvTop1_3{
  font-size: 25px;
  font-weight: bolder;
  color: #FFFFFF;
  float: left;
  padding: 39px 0 0 10px;
}
.pvBox{
  position: absolute;
  top:95px;
  width: 100%;
  margin: 0 auto;
  padding:0 25px 10px 25px;
  box-sizing: border-box;
}
.pvBox2{
  width: 100%;
  background: url("../../assets/charging.png") no-repeat center / 100% 100%;
  border-radius: 5px;
  padding: 5px 0 8px 0;
  box-sizing: border-box;
  position: relative;
}
.lineBox{
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 10px 10px;
  .line{
    border-bottom: 1px dashed #bdbdbd;
  }
}
.pvBox1_2{
  width: 100%;
  padding: 15px 0 10px 20px;
  font-size: 16px;
  text-align: left;
  box-sizing: border-box;
}
.icon{
  font-size: 24px;
  position: absolute;
  top: 15px;
  right: 15px;
}
.pvBox1_3{
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  margin-bottom: 8px;
  justify-content: space-between;
}
</style>
